<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">【电池门店订单】{{tradeNo}}</view>
		</view>
		<scroll-view scroll-y>
		<view class="cu-card">
			<view class="cu-item padding-sm">
				<view class="solid-bottom padding-bottom-xs"><text class="cuIcon-form text-orange"></text>订单基础信息</view>
				<view class="flex justify-between margin-top-sm">
					<view>订单号</view>
					<view>{{info.tradeNo}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>会员姓名</view>
					<view>{{info.memberName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>电池类型</view>
					<view>{{info.batteryTypeName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>电池编号</view>
					<view>{{info.portableBatterySn || '---'}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>订单金额</view>
					<view>{{info.moneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>支付类型</view>
					<view>{{info.payTypeName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>支付状态</view>
					<view>{{info.payStateName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>订单状态</view>
					<view>{{info.stateName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>创建时间</view>
					<view>{{info.createDate}}</view>
				</view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item padding-sm">
				<block v-if="userInfo.canCancelOrder == 2">
					<button v-if="info.payState == 2" class="cu-btn bg-orange round margin-sm" @click="btnFinish()">完成订单</button>
					<button v-if="info.payState == 2" class="cu-btn bg-orange round margin-sm" @click="btnCancel()">撤销订单</button>
					<button v-if="info.payState == 5" class="cu-btn bg-orange round margin-sm" @click="btnRefund()">部分退款</button>
				</block>
				<button v-if="info.payState > 1" class="cu-btn bg-orange round margin-sm" @click="toSendCoupon()">发优惠券</button>
				<button v-if="info.payState == 2 && (info.state == 1 || info.state == 5)" class="cu-btn bg-orange round margin-sm" @click="toLease()">租借电池</button>
				<button v-if="info.payState == 2 && (info.state == 2 || info.state == 3 || info.state == 7)" class="cu-btn bg-orange round margin-sm" @click="toRevert()">归还电池</button>
			</view>
		</view>
		<view class="cu-list menu card-menu">
			<view class="cu-item arrow" @click="toOperateRecord">
			    <view class="content">
			        <text class="text-grey">订单操作记录</text>
			    </view>
			</view>
			<view class="cu-item arrow" @click="toProfitList">
			    <view class="content">
			        <text class="text-grey">订单分成记录</text>
			    </view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item padding-sm">
				<view class="solid-bottom padding-bottom-xs"><text class="cuIcon-recharge text-orange"></text>订单收费信息</view>
				<view class="flex justify-between margin-top-sm">
					<view>押金</view>
					<view>{{info.depositMoneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>日租金</view>
					<view>{{info.dayMoneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>超时日租金</view>
					<view>{{info.timeoutDayMoneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>开始时间</view>
					<view>{{info.startDate}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>结束时间</view>
					<view>{{info.endDate}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>使用时长</view>
					<view>{{info.useDay}}天</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>支付金额</view>
					<view>{{info.payMoneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>钱包支付</view>
					<view>{{info.walletMoneyStr}}元</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>优惠金额</view>
					<view>{{info.discountMoneyStr}}元</view>
				</view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item padding-sm">
				<view class="solid-bottom padding-bottom-xs"><text class="cuIcon-sort text-orange"></text>订单租借信息</view>
				<view class="flex justify-between margin-top-sm">
					<view>租借网点名称</view>
					<view>{{info.leasePlaceName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>租借类型</view>
					<view>{{info.leaseTypeName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>预约租借时长</view>
					<view>{{info.leaseDay}}天</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>归还类型</view>
					<view>{{info.revertTypeName}}</view>
				</view>
				<view class="flex justify-between margin-top-sm">
					<view>归还网点名称</view>
					<view>{{info.revertPlaceName || '???'}}</view>
				</view>
			</view>
		</view>
		<view class="foot"><text class="ftxt">我也是有底线的</text></view>
		</scroll-view>

		<view class="cu-modal" :class="modalName=='finishModal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content">完成订单</view>
					<view class="action" @click="btnHideModal()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-sm text-red"><text class="cuIcon-favorfill"></text>请使用租借和归还功能结束订单</view>
				<view class="text-sm text-red"><text class="cuIcon-favorfill"></text>不处理电池租借归还状态时，才使用此功能结束订单</view>
				<form>
					<view class="cu-form-group">
						<view class="title">收费金额</view>
						<input placeholder="请填写(必填项)" v-model="finishMoney"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">备注</view>
						<input placeholder="请填写(必填项)" v-model="finishNote"></input>
					</view>
				</form>
				<view class="cu-bar btn-group margin-top">
					<button class="cu-btn bg-grey shadow-blur round" @click="btnHideModal()">取消</button>
					<button class="cu-btn bg-orange shadow-blur round" @click="btnFinishSubmit()">确定</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='refundModal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content">订单退款</view>
					<view class="action" @click="btnHideModal()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<form>
					<view class="cu-form-group">
						<view class="title">退款金额(元)</view>
						<input placeholder="请填写(必填项)" v-model="refundMoney"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">退款原因</view>
						<input placeholder="请填写(必填项)" v-model="refundNote"></input>
					</view>
				</form>
				<view class="cu-bar btn-group margin-top">
					<button class="cu-btn bg-grey shadow-blur round" @click="btnHideModal()">取消</button>
					<button class="cu-btn bg-orange shadow-blur round" @click="btnRefundSubmit()">确定</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal" :class="modalName=='cancelModal'?'show':''">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white justify-end">
					<view class="content">撤销订单</view>
					<view class="action" @click="btnHideModal()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<form>
					<view class="cu-form-group">
						<view class="title">撤销原因</view>
						<input placeholder="请填写(必填项)" v-model="cancelNote"></input>
					</view>
				</form>
				<view class="cu-bar btn-group margin-top">
					<button class="cu-btn bg-grey shadow-blur round" @click="btnHideModal()">取消</button>
					<button class="cu-btn bg-orange shadow-blur round" @click="btnCancelSubmit()">确定</button>
				</view>
			</view>
		</view>
		
		<view class="cu-modal error-modal" :class="errorModal?'show':''">
			<view class="cu-dialog padding text-red">
				<view class="padding">{{errorMsg}}</view>
				<view class="flex margin-top solids-top">
					<button class="cu-btn bg-btn-text flex-sub" @click="bindHideErrorModal()">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:this.$store.getters.GET_userInfo || {},
				tradeNo:'订单号',
				createDate:null,
				info:{},
				modalName:null,
				
				finishMoney:null,
				finishNote:null,
				
				refundMoney:null,
				refundNote:null,
				
				cancelNote:null,
				
				errorMsg:'',
				errorModal:false
			};
		},
		onLoad(option) {
			this.tradeNo = option.tradeNo;
			this.createDate = option.createDate;
		},
		onShow() {
			this._loadOrderInfo();
		},
		methods:{
			_loadOrderInfo:function(){
				if(this.tradeNo){
					const _self = this;
					const api = this.$request;
					api.post(api.url.bxscnShopOrderInfo,{
						tradeNo:this.tradeNo,
						createDate:this.createDate
					},(res)=>{
						console.log(res)
						if(res.code==200){
							_self.info = res.body;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false,
								complete:function(){
									uni.navigateBack();
								}
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
							setTimeout(function(){
								uni.navigateBack();
							},1000)
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					})
					setTimeout(function(){
						uni.navigateBack();
					},1000)
				}
			},
			bindHideErrorModal:function(){
				this.errorMsg = '';
				this.errorModal = false;
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			btnFinish:function(){
				this.finishMoney = this.info.money;
				this.finishNote = null;
				this.modalName = 'finishModal';
			},
			//完成订单
			btnFinishSubmit:function(){
				if(!this.finishMoney || this.finishMoney <= 0){
					this.errorMsg = '请填写收费金额';
					this.errorModal = true;
					return;
				}
				if(!this.finishNote || this.finishNote == ''){
					this.errorMsg = '请填写备注';
					this.errorModal = true;
					return;
				}
				
				this.modalName = null;		//关闭
				
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnShopOrderFinish,{
					tradeNo:_self.info.tradeNo,
					createDate:_self.info.createDate,
					money:_self.finishMoney,
					note:_self.finishNote
				},(res)=>{
					uni.hideLoading();
					if(res.code == 200){
						setTimeout(function(){
							uni.showToast({
								title:'完成订单成功',
								icon:'success'
							})
							_self._loadOrderInfo();
						},1000)
					}else if(res.msg){
						_self.errorMsg = res.msg;
						_self.errorModal = true;
					}else{
						_self.errorMsg = '操作失败';
						_self.errorModal = true;
					}
				})
			},
			btnRefund(){
				this.refundMoney = this.info.money;
				this.refundNote = null;
				this.modalName = 'refundModal';
			},
			//退部分
			btnRefundSubmit(){
				if(!this.refundMoney || this.refundMoney <= 0){
					this.errorMsg = '请填写退款金额';
					this.errorModal = true;
					return;
				}
				if(!this.refundNote || this.refundNote == ''){
					this.errorMsg = '请填写退款原因';
					this.errorModal = true;
					return;
				}
				
				this.modalName = null;		//关闭
				
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnShopOrderRefund,{
					tradeNo:_self.info.tradeNo,
					createDate:_self.info.createDate,
					money:_self.refundMoney,
					note:_self.refundNote
				},(res)=>{
					uni.hideLoading();
					if(res.code == 200){
						setTimeout(function(){
							uni.showToast({
								title:'退款成功',
								icon:'success'
							})
							_self._loadOrderInfo();
						},1000)
					}else if(res.msg){
						_self.errorMsg = res.msg;
						_self.errorModal = true;
					}else{
						_self.errorMsg = '操作失败';
						_self.errorModal = true;
					}
				})
			},
			btnCancel(){
				this.cancelNote = null;
				this.modalName = 'cancelModal';
			},
			//撤销订单
			btnCancelSubmit(){
				if(!this.cancelNote || this.cancelNote == ''){
					this.errorMsg = '请填写撤销原因';
					this.errorModal = true;
					return;
				}
				
				this.modalName = null;		//关闭
				
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnShopOrderCancel,{
					tradeNo:_self.info.tradeNo,
					createDate:_self.info.createDate,
					note:_self.cancelNote
				},(res)=>{
					uni.hideLoading();
					if(res.code == 200){
						setTimeout(function(){
							uni.showToast({
								title:'撤销成功',
								icon:'success'
							})
							_self._loadOrderInfo();
						},700)
					}else if(res.msg){
						_self.errorMsg = res.msg;
						_self.errorModal = true;
					}else{
						_self.errorMsg = '操作失败';
						_self.errorModal = true;
					}
				})
			},
			toLease:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./lease',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', info)
					}
				})
			},
			toRevert:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./revert',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', info)
					}
				})
			},
			toOperateRecord:function(){
				const info = this.info;
				uni.navigateTo({
					url:'./operate?tradeNo='+info.tradeNo+'&createDate='+info.createDate
				})
			},
			toProfitList:function(){
				const info = this.info;
				uni.navigateTo({
					url:'../profit?tradeNo='+info.tradeNo+'&createDate='+info.createDate
				})
			},
			toSendCoupon:function(){
				const info = this.info;
				uni.navigateTo({
					url:'../coupon',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', info)
					}
				})
			}
		}
	}
</script>

<style lang="less">
.cu-card .cu-item{margin:10rpx 20rpx;}
.cu-list.card-menu{margin:10rpx 20rpx;}
.container scroll-view{height:92vh;}
.cu-modal .cu-form-group{text-align:right;}
.footer{position:fixed;bottom:0;width:100vw;height:70rpx;display:flex;justify-content:center;}
.footer>button{margin-left:3rpx;margin-right:3rpx;}
</style>
